<script setup>
import {ref} from "vue";
import VForm from "../components/form/VForm.vue";
import VFormInput from "../components/form/VFormInput.vue";

const formData = ref({
  name: '',
  age: 10,
  age2: 10,
  age3: 10,
  age4: 10,
  age5: 20,
  ageArray: [10],
});

const options = ref([
  {
    label: '选项1',
    value: 10,
  },
  {
    label: '选项2',
    value: 20
  }
]);
</script>

<template>
  <h3>props、emit、watch、v-model、$attrs、自定义输入框组件</h3>
  <v-form v-model="formData" style="width: 30%" footer-justify="center">
    <v-form-input label="输入框" v-model="formData.age"/>
    <v-form-input label="文本域" v-model="formData.age2" type="textarea"/>
    <v-form-input label="下拉框" v-model="formData.age3" type="select" :options="options"/>
    <v-form-input label="单选" v-model="formData.age5" type="radio" :options="options"/>
    <v-form-input label="多选" v-model="formData.ageArray" type="checkbox" :options="options"/>
    <v-form-input label="数值输入框" v-model="formData.age4" type="number" :min="1" :max="20"/>
  </v-form>
</template>

<style scoped>

</style>